<template>
  <div class="editor-page">
    <div class="container page">
      <div class="row">

        <div class="col-md-10 offset-md-1 col-xs-12">
          <form @submit.prevent="onSubmit">
            <fieldset class="form-group">
                <input type="text" class="form-control form-control-lg" v-model="formData.title" placeholder="Article Title" required>
            </fieldset>
            <fieldset class="form-group">
                <input type="text" class="form-control" v-model="formData.description" placeholder="What's this article about?" required>
            </fieldset>
            <fieldset class="form-group">
                <textarea class="form-control" rows="8" v-model="formData.body" placeholder="Write your article (in markdown)" required></textarea>
            </fieldset>
            <fieldset class="form-group">
                <input type="text" class="form-control" v-model="formData.tagList" placeholder="Enter tags"><div class="tag-list"></div>
            </fieldset>
            <button class="btn btn-lg pull-xs-right btn-primary">
                Publish Article
            </button>
          </form>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { AddArticles } from '@/api/article'

export default {
  name: 'Editor',
  // 在路由匹配组件渲染之前会先执行中间件
  middleware: 'authenticated',
  data() {
    return {
      formData: {
        title: '',
        description: '',
        body: '',
        tagList: ''
      }
    }
  },
  methods: {
    async onSubmit(){
      console.log('1234')
      this.formData.tagList = this.formData.tagList.split(',')
      await AddArticles(this.formData)
      this.$router.push('/')
    }
  }
}
</script>

<style>

</style>